import React, { useState, useEffect, Component } from 'react'
import ContentItem from './components/contentItem'
import { Input } from 'antd'
import Serv from './serv'
import Sidebar from './components/Sidebar/index'
import moment from 'moment'
import './app2.less'
import { round, cloneDeep } from 'loadsh'
import {io} from './request'
const _dataList = [
  // 1min 5min 15min  60min 4hour 1day 1week 1mon
  { period: "1min", data: [] },
  { period: "5min", data: [] },
  { period: "15min", data: [] },
  { period: "60min", data: [] },
  { period: "4hour", data: [] },
  { period: "1day", data: [] },
  { period: "1week", data: [] },
  { period: "1mon", data: [] },
]
export default class App extends Component {
  constructor(props) {
    super(props)
    this.timeId = null
    this.isrequest = false
    this.state = {
      dataList: cloneDeep(_dataList),
      TransactionInfo: [],
      contract_code: "btcusdt",
      contentS: {
        width: "20%",
      }
    }
  }
  componentDidMount() {
    // io({
    //   period: '1min',
    //   size: 2000,
    //   symbol: this.state.contract_code,
    // })
    this.initPageReq()
  }

  getTitle = (t) => this.setState({ contract_code: t }, () => this.initPageReq(false))


  initPage = (t = true, t1 = false) => {
    if (!t) {
      !t1 && this.initTransactionInfo();
      this.initDataList(()=>{
        this.getContentData();
        this.getTransactionInfo();
      });
    } else {
      this.getContentData();
      this.getTransactionInfo();
    }
  }
  initPageReq = (t = true) => {
    if (this.timeId) clearInterval(this.timeId);
    this.initPage(t, true)
    !t && (this.isrequest = false)
    t = true
    let timeId = setInterval(() => !this.isrequest && this.initPage(t, true), 1000 * 8);
    this.timeId = timeId
  }
  initDataList = cb => this.setState({ dataList: cloneDeep(_dataList) }, () => cb && cb())

  initTransactionInfo = () => this.setState({ TransactionInfo: [] })

  getContentData = () => {
    let dataList = this.state.dataList
    dataList.forEach(async (item, index) => {
      const res = await Serv.getContentData({
        period: item.period,
        size: 2000,
        symbol: this.state.contract_code,
      })
      if (res.status === "ok") {
        dataList[index].data = res.data.map((item) => ({
          ...item,
          timestamp: item.id * 1000,
          volume: item.vol,
        })).reverse()
        this.setState({ dataList })
      }
    })
  }
  getTransactionInfo = async () => {
    this.isrequest = true
    const res = await Serv.getTransactionInfo()
    if (res.status === "ok") {
      // res.data = res.data.map((item) => {

      //   item.settlement_date = moment(
      //     new Date(Number(item.settlement_date))
      //   ).format("YYYY-MM-DD HH:mm:ss");
      //   const data = [];
      //   for (let key in item) {
      //     if (!["support_margin_mode", "symbol"].includes(key)) {
      //       const obj = [];
      //       obj.push(key);
      //       obj.push(item[key]);
      //       data.push(obj);
      //     }
      //   }
      //   return {
      //     title: item.symbol,
      //     data,
      //   };
      // });
      this.setState({
        TransactionInfo: res.data.map(item => ({ symbol: item.symbol, zf: round(round(((item.close - item.open) / item.open), 4) * 100, 2) })).sort((a, b) => b.zf - a.zf)
        // .filter(item => {
        //   // item.symbol
        //   const _str = item.symbol;
        //   if (_str.slice(_str.length - 4) === "usdt")
        //     return false
        //   else
        //     return true
        // })
      })
    }
    this.isrequest = false
  }
  onChange = (t) => {
    const contentS = { ...this.state.contentS }
    contentS.width = t ? "20%" : "270px";
    this.setState({ contentS })
  }

  render() {
    return (
      <div className="app">
        <Sidebar
          onChange={this.onChange}
          getTitle={this.getTitle}
          dataList={this.state.TransactionInfo}
        />
        {/* <div style={this.state.contentS}></div> */}
        <div className='contentMain' >
          {
            this.state.dataList.map((val, i) => (
              <div key={i}>
                <ContentItem data={val} pIndex={i} />
              </div>
            ))
          }
        </div >
        {/* // <KLineComponent /> */}
      </div >
    )
  }
}